<template>
	<view class="address-add">
		
		<form @submit="formSubmit">
			<view class="form-item lh-70 flex p-lr-30 p-tb-15 m-b-2 bg-w">
				<text class="item-name">收货人</text>
				<view class="flex r m-l-auto">
					<input class="br-10 p-lr-20 lh-30 bg-g" placeholder="请输入收货人姓名"  v-model="addressInfo.consignee" />
				</view>
			</view>
			<view class="form-item lh-70 flex p-lr-30 p-tb-15 m-b-2 bg-w">
				<text class="item-name">手机号</text>
				<view class="flex r m-l-auto">
					<input class="br-10 p-lr-20 lh-30 bg-g" placeholder="请输入手机号" v-model="addressInfo.phone" />
				</view>
			</view>

      <!-- #ifdef MP-WEIXIN -->
      <view class="form-item lh-70 flex p-lr-30 p-tb-15 m-b-2 bg-w">
        <text class="item-name">地区</text>
        <view class="flex r m-l-auto">
          <picker class="br-10 p-lr-20 lh-30 bg-g wa p-t-20" mode="region" :value="region" level="region" @change="addressTypeChange">
            {{region[0]}}{{region[1]}}{{region[2]}}
          </picker>
        </view>
      </view>
      <!-- #endif -->

			<view class="form-item lh-70 flex p-lr-30 p-tb-15 m-b-2 bg-w">
				<text class="item-name">详细地址</text>
				<view class="flex r m-l-auto">
					<input class="br-10 p-lr-20 lh-30 bg-g" placeholder="请输入详细地址" v-model="addressInfo.address" />
				</view>
			</view>
			
			<view class="bottom-fixed p-b-50 bg-g">
				<button class="bg-green ts-30 lh-30 p-25 tc-w m-50" form-type="submit" :disabled="submitDisabled">保存</button>
			</view>
		</form>
		
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import graceChecker from '@/utils/graceChecker';

	export default {
		components: {
		},
		data() {
			return {

				submitDisabled:false,
				addressInfo:{
					id:0,
					consignee:'',
					phone:'',
					city:'',
					address:''
				},
        region: ['福建省', '福州市', '鼓楼区']
			}
		},
		computed: {
			...mapState(['common','user'])
		},
		async onLoad(options) {
			this.addressInfo.id = options.id ? options.id :0;

			if(options.id){
				this.loadData();
			}
			
		},
		methods: {
			
			change(data) {
				this.addressInfo.city = data.data.join('-')
			},
			
			loadData(){
				this.$api.post({
					url: '/user_address/detail',
					loadingTip:'加载中...',
					data: {
						id:this.addressInfo.id,
					},
					success: res => {
						this.addressInfo = res;
						this.addressType.forEach((item,index)=>{
							if(item.value == this.addressInfo.type){
								this.addressTypeIndex = index;
							}
						});
					}
				});
			},
			
			addressTypeChange(e){
        this.region = e.detail.value;
			},
			
			// 保存
			formSubmit() {
				var addressInfo = this.addressInfo;
				if(this.submitDisabled){
					return false;
				}
				this.submitDisabled = true;
        addressInfo.city = this.region[0]+this.region[1]+this.region[2];
				//定义表单规则
				var rule = [
					{ name: 'consignee', checkType: 'string', checkRule: '2,10', errorMsg: '请输入收货人姓名' },
					{ name: 'phone', checkType: 'phoneno', errorMsg: '请输入正确的手机号' },
					{ name: 'city', checkType: 'string', checkRule: '2,100', errorMsg: '请选择地区' },
					{ name: 'address', checkType: 'string', checkRule: '2,100', errorMsg: '请输入详细地址' },
				];
				
				//进行表单检查
				var checkRes = graceChecker.check(addressInfo, rule);
				
				if (checkRes) {
					
					this.$api.post({
						url: '/user_address/add',
						loadingTip:'提交中...',
						data: addressInfo,
						success: (res) => {
							this.$xyfun.prePage().loadData(true);
							this.$xyfun.back('保存成功');
						},
						fail(){
							this.submitDisabled = false;
						}
					});
				} else {
					this.$xyfun.msg(graceChecker.error);
					this.submitDisabled = false;
				}
				
			},
		}
	}
</script>


<style scoped lang="scss">
	.avatar{width: 100rpx;height: 100rpx;}
	.form-item .r{
		width: 70%;
		input,.picker{width: 100%;height: 70rpx;}
		.picker div{width: 100%;}
		.picker-address{width: 100%;}
		.pic-text{width: 100%;}
	}
</style>
